<template>
	<view class="content">
		<uni-nav-bar 
			height="200rpx" 
			:title="title" 
			backgroundColor="#efefef"
			left-icon="arrow-left"
			color="#4b85b5"
			@clickLeft="back()"
		/>
		<text class="title">这是一片黑色的地方。你就是光明。</text>
		<view v-for="item in jourList" :key="item.id">
			<treeHoldCar :item="item"></treeHoldCar>
		</view>
		<view class="more" @click="addMore">{{buttomText}}</view>
	</view>
</template>

<script>
	import {getNews,getLikes,getUserLikes,getUserList} from '@/api/treeHole.js'
	export default {
		data() {
			return {
				title:"标题",
				jourList:[],
				id:"",
				token:"",
				isOpt:null,
				page:1,
				buttomText:"点击加载更多....."
			};
		},
		onLoad(opt) {
			this.getMessage()
			this.isOpt = opt.id
			if(opt.id==1){
				this.title = "NEW"
				this.newsTreeHold()
				this.buttomText="没有更多了....."
			}else if(opt.id==2){
				this.title = "BEST"
				this.likesTreeHold()
				this.buttomText="没有更多了....."
			}else if(opt.id==3){
				this.title = "我喜欢的"
				this.userLikeTreeHolds()
			}else if(opt.id==4){
				this.title = "我创作的"
				this.userTreeHolds()
			}
		},
		onReachBottom() {
			this.addMore()
		},
		methods:{
			// 加载更多
			addMore(){
				this.page+=1;
				console.log(this.page)
				if(this.isOpt==3){
					this.userLikeTreeHolds()
				}else if(this.isOpt==4){
					this.userTreeHolds()
				}
			},
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			// 用户投递的树洞列表
			userTreeHolds(){
				getUserList({
					"token":this.token,
					"userId":this.id,
					"page":this.page
				}).then(res=>{
					if(res.data.data.length===0){
					
						this.buttomText = "没有更多了....."
					}
					this.jourList = [...this.jourList, ...res.data.data];
				})
			},
			//获取用户喜欢的
			userLikeTreeHolds(){
				getUserLikes({
					"token":this.token,
					"userId":this.id,
					"page":this.page
				}).then(res=>{
					if(res.data.data.length===0){
						
						this.buttomText = "没有更多了....."
					}
					this.jourList = [...this.jourList, ...res.data.data];
				})
			},
			//获取最新的十篇
			newsTreeHold(){
				getNews({
					"token":this.token
				}).then(res=>{
					this.jourList = res.data.data
				})
			},
			likesTreeHold(){
				getLikes({
					"token":this.token
				}).then(res=>{
					this.jourList = res.data.data
				})
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $bg-gary;
}
.content{
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5vh;
		padding-top: 26rpx;
		color: #a4a4a4;
		
	}
	.more{
		text-align: center;
		color: #a4a4a4;
		padding-bottom: 2vh;
	}
}

</style>
